<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>监测建议</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="../../common/css/vant-index.css" />
    <link rel="stylesheet" href="../css/monitor.css">

    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="../../common/js/vue.min.js"></script>
    <script src="../../common/js/axios.min.js"></script>
    <script src="../../common/js/vue.global.prod.js"></script>

</head>

<body>
    <div id="app" v-cloak>
        <van-nav-bar title="监测建议" left-text="返回" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
            <template #right>
                <van-icon name="wap-home-o" size='18' />
            </template>
        </van-nav-bar>
        <div class="diet_body">
            <van-list v-if="nothing==1" v-model="loading" :finished="finished" finished-text="没有更多了">
                <van-cell center v-for="item in list" :key="item">
                    <div class="diet_list_one">
                        <img id="dietIcon" style="float: left;"
                             :src='item.signinType==1?"../img/bloodprofile/rice.png"
                            :item.signinType==2?"../img/bloodprofile/bloodpressure.png"
                            :item.signinType==3?"../img/bloodprofile/sport.png"
                            :item.signinType==4?"../img/bloodprofile/medical.png"
                            :item.signinType==5?"../img/bloodprofile/dinner.png"
                            :item.signinType==6?"../img/bloodprofile/bmi.png"
                            :item.signinType==7?"../img/bloodprofile/waist.png"
                            :item.signinType==8?"../img/bloodprofile/ketone.png"
                            :item.signinType==9?"../img/bloodprofile/insulin.png"
                            :item.signinType==10?"../img/bloodprofile/sleep.png"
                            :"../img/bloodprofile/advise.png"' alt="">

                        <div class="diet_content">
                            <div class="diet_type">
                                <span
                                    style="display:inline-block;margin-top: 0.5rem;font-size: 1rem;">{{item.signinType==1?'血糖'
                                        :item.signinType==2?'血压'
                                        :item.signinType==3?'运动'
                                        :item.signinType==4?'用药'
                                        :item.signinType==5?'饮食'
                                        :item.signinType==6?'BMI'
                                        :item.signinType==7?'腰围'
                                        :item.signinType==8?'尿酮'
                                        :item.signinType==9?'胰岛素'
                                        :item.signinType==10?'睡眠':''}}建议</span>
                                <!-- <span style="float: right;">{{item.sportRecordStepTypeName}}{{item.sportRecordStep}}步
                                    {{item.sportRecordPowerDescribe}}</span> -->
                                <span
                                    style="float: right;margin-top: 0.5rem;font-size: 1rem;">{{item.recordDate?item.recordDate:''}}</span>

                            </div>

                        </div>
                    </div>
                    <van-card style="float: left;width: 100%;border-radius: 30px;">
                        <template #tags>
                            <span style="font-size:0.8rem">{{item.suggestContent}}</span>

                        </template>
                    </van-card>
                </van-cell>
                <van-pagination v-model="currentPage" @click="pageChange" :page-count="this.totalPage" mode="simple" />
            </van-list>
            <div v-if="nothing==2" class="none_info">
                <img src="../img/bloodprofile/none.png" />
                <p style="font-size: 12px;">— 暂无数据 —</p>
            </div>

        </div>
    </div>
</body>
<script src="../../common/js/vant.min.js"></script>
<script src="../../base.js"></script>
<script type="module">

    import {
        getAction,
        postAction,
        getUrl,
    } from "../../common/js/api/vue3-axios-utils.js";

    const app = Vue.createApp({

        data() {
            return {
                url: {
                    getAdviseList: "/107/01/1070108",
                },
                show: false,
                columns: ['最近两周', '最近一个月', '最近三个月', '全部'],
                columnsValue: '最近两周',
                nothing: 1,
                totalPage: 0,
                currentPage: 1,
                list: [],
                period: 2,
                loading: false,
                finished: false,
            }
        },
        methods: {
            pageChange() {
                this.getAdviseList()

            },
            showPopup() {
                this.show = true
            },
            onConfirm(value, index) {
                console.log(value, index);
                this.columnsValue = value
                this.show = false
                if (index == 0) {
                    this.period = 2
                }
                if (index == 1) {
                    this.period = 3
                }
                if (index == 2) {
                    this.period = 5
                }
                if (index == 3) {
                    this.period = 0
                }
                this.getAdviseList()
            },
            async getAdviseList() {

                let params = {
                    // 患者 ID 从本地存储空间的 pid 获得
                    patientId: localStorage.pid,
                    period: this.period,
                    //默认取一页10条数据
                    page: this.currentPage,
                    type: 3,
                    pageSize: 10
                };
                let url = getUrl() + this.url.getAdviseList;
                const res = await postAction(url, params);
                if (res.data.success) {
                    //判断有无打卡记录 无打卡记录显示无内容页面
                    if (res.data.result == null) {
                        this.nothing = 2
                    } else {
                        this.nothing = 1
                        this.list = res.data.result.records;
                        this.totalPage = res.data.result.pages
                        console.log(this.list);
                    }
                }
            },
            onClickLeft() {
                window.location.href = '../dailyIndex.html?userid='+localStorage.pid
            },
            onClickRight() {
                window.location.href = '../index.html?userid=' + localStorage.pid
            },
        },

        created() {
            this.getAdviseList()
        },
    });
    app.use(vant);

    app.use(vant.Lazyload);


    app.mount('#app');
</script>

</html>
